<template>
    <div>
        <el-select @change="rendtable" v-model="search.AndWhere.shareUserId" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-date-picker
  @change="rendtable"

      v-model="search.where.CreateDate"
      type="daterange"
      value-format="yyyy-MM-dd HH:mm:ss" 
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

    <el-col  class="flex  margin50" :span="4 ">
                    <!-- <div  style="width: 50px; line-height: 50px; ">  <span>状态:</span> </div> -->
                    <el-checkbox-group @change="change2"  v-model="checkboxStatus">
                        <el-checkbox-button v-for="(city , index) in checkboxGroup1"  :label="city.settlementStatus" :key="city.name">{{city.name}}</el-checkbox-button>
                </el-checkbox-group>
             </el-col>
             <el-button  type="primary" @click="toggleSelection()">结算</el-button>

            <el-table
            ref="tableele"
            height="600"
            v-loading="loading"
            @selection-change="one"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
        :selectable="selectable"
      width="55">
    </el-table-column>
    <el-table-column
    fixed
      prop="orderSn"
      label="订单号"
      width="120">
    </el-table-column>


    <el-table-column
   
      prop="CreateDate"
      label="日期"
      width="150">
          <template slot-scope="scope">
            <div>
                {{scope.row.CreateDate | mytime }} 
            </div>
          </template>



    </el-table-column>
    <el-table-column
      prop="novel.name"
      label="小说名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="userId.username"
      label="用户"
      width="300">
    </el-table-column>
    <el-table-column
      prop="shareUserId"
      label="代理"
      width="120">
    </el-table-column>
    <el-table-column
      prop="actualPrice"
      label="价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="brokeragePrice"
      label="佣金"
      width="120">
    </el-table-column>

    <el-table-column
      prop="discount_amount"
      label="比率"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

    </div>
</template>

<script>
import {getagent ,settlement} from '@/api/agent'
import {orderlist } from '@/api/order'
    export default {
        data() {
      return {
        loading:false,
        checkboxStatus:[],
        checkboxGroup1:[   {  name:"待结算" , settlementStatus:0  },{  name:"已结算" , settlementStatus:1 }],
        CreateDate:[],
        tableData:[],
        options: [],
        value: '',
        search:{

                        page:1,
                        size:100000000, 
                        where:{
                            // CreateDate:[]
                        },
                        AndWhere:{
                            status:[3]
                         }
                        // 选范围
                    },
      }
    } ,
   async created() {
        let result   =  await getagent()
        console.log("asd",result);
        this.options = result.data[0].map( v=>{
                return {   
                    value:v.id,
                    label:v.username
                 }
        })
        await this.rendtable()
    },
    methods: {
        change2(value){
                    
                    this.search.AndWhere['settlementStatus'] =  value
                    this.rendtable()
                },

        async rendtable(){
                    this.loading=true
                    let result =  await orderlist(  this.search )
                    this.loading=false
                    console.log(result);
                    this.tableData = result.data.list
                  
                },
             async   toggleSelection() {
                     
                        console.log(   this.$refs.tableele.selection);
                        if(this.$refs.tableele.selection.length>0){
                                //  发送请求去结算
                                let result =  await settlement(  { idarr: this.$refs.tableele.selection.map( v =>  v.id)})
                                if(result.code ==20000){
                                        this.rendtable()
                                }

                        }else{
                          this.$msg({
                            message:"请选中订单",
                            type:"error",
                            duration:1000
                          })
                        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
      ,
     async one(value){
        console.log(value);
        //   let result =  await settlement(value.map( v =>  v.id))
      },


      selectable(row, index){

          return  !row.settlementStatus
      }


            },
 
       


    }
</script>

<style lang="scss" scoped>

</style>